 <!-- 
 @Author: Havery
 @Date: 2021-01-15 14:26:31  
 @function: 饼状图
 -->
<template>
  <div id="sensor_statistic" class="sensor_statistic" style="width:310px;height:150px;">柱状图统计</div>
</template>
<script>
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: {},
      data: [],
      name: "",
    };
  },
  props: {
    echartObj: {
      type: Object,
      default: {},
    },
  },
  watch: {
    //观察option的变化
    echartObj: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          this.loadEchart();
        } else {
          this.init();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
  created() {},
  mounted() {
    this.loadEchart();
  },
  methods: {
    loadEchart() {
      this.myChart = Echarts.init(document.getElementById("sensor_statistic"));
      var option = {
        series: [
          {
            name: this.echartObj.name,
            type: "pie",
            radius: "65%",
            center: ["45%", "45%"],
            data: this.echartObj.data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                color: function (params) {
                  //自定义颜色
                  var colorList = ["#f8ce2f", "#00DEF7", "#164B73"];
                  return colorList[params.dataIndex];
                },
              },
            },
            labelLine: {
              normal: {
                length: 1, // 改变标示线的长度
                //lineStyle: {
                //    color: "red"  // 改变标示线的颜色
                //}
              },
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 13,
                  color: "#CCF2FF", // 改变标示文字的颜色
                },
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.sensor_statistic{margin:0 auto;}
</style>